<!--
 * @Author: ZhaoZhiqi
 * @Date: 2024-09-03 17:50:24
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2025-01-17 18:05:46
 * @Description: 充电配置
 * @FilePath: \charging-admin\src\views\charge\config\index.vue
-->
<template>
  <div class="app-container">
    <el-form size="small" :inline="true">
      <el-form-item label="配置类型">
        <el-select v-model="configKey" placeholder="请选择配置类型">
          <el-option label="最长充电时长" value="long_recharge_time"></el-option>
          <el-option label="免费充电分钟" value="free_recharge_time"></el-option>
          <el-option label="设备离线延迟结束订单时间" value="offline_delay_time"></el-option>
          <el-option label="投诉反馈电话" value="feedback_call_phone"></el-option>
          <!-- <el-option
            label="设备类型配置"
            value="device_type_config"
          ></el-option> -->
          <el-option label="全局折扣配置" value="global_discount_count"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <div class="config-container">
      <div class="config-label">配置内容</div>

      <!-- 设备类型配置 -->
      <div class="device-wrapper" v-if="configKey === 'device_type_config'">
        <div class="device-item" v-for="(item, index) in deviceTypeList" :key="index">
          <div>设备名称：{{ item.deviceType }}</div>
          <div>端口数：{{ item.portNumber }}</div>
        </div>
      </div>
      <!-- 全局折扣配置 -->
      <div class="discount-wrapper" v-else-if="configKey === 'global_discount_count'">
        <div style="margin-bottom: 10px">
          折扣类型:
          {{
            discountTypeList.find((item) => item.value === discountType)
              ? discountTypeList.find((item) => item.value === discountType)
                .label
              : ""
          }}
        </div>
        <template v-if="discountType === 'full_reduction'">
          <div class="discount-item" v-for="(item, index) in fullReductionList" :key="index">
            <div>满额：{{ item.threshold / 100 }}元</div>
            <div>减额：{{ item.sub / 100 }}元</div>
          </div>
        </template>
        <div v-else>折扣比例: {{ discountContent }}</div>
      </div>
      <!-- 其他配置 -->
      <div v-else class="config-content">{{ content }}</div>
    </div>

    <div class="edit-footer">
      <el-button size="small" type="primary" @click="edit">修改配置</el-button>
    </div>

    <el-dialog title="修改配置" :visible.sync="visible" width="500px">
      <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="120px">
        <el-form-item label="configId" prop="configId">
          <el-input v-model="editForm.configId" placeholder="请输入configId" />
        </el-form-item>
        <el-form-item label="configName" prop="configName">
          <el-input v-model="editForm.configName" placeholder="请输入configName" />
        </el-form-item>
        <el-form-item label="configKey" prop="configKey">
          <el-input v-model="editForm.configKey" placeholder="请输入configKey" />
        </el-form-item>
        <el-form-item label="configValue" prop="configValue">
          <el-input type="textarea" v-model="editForm.configValue" placeholder="请输入configValue" />
        </el-form-item>
        <el-form-item label="configType" prop="configType">
          <el-input v-model="editForm.configType" placeholder="请输入configType" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="visible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 最长充电时长 -->
    <el-dialog title="修改配置" :visible.sync="longRechargeTimeVisible" width="500px">
      <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="120px">
        <el-form-item label="最长充电时长" prop="configValue">
          <el-input v-model="editForm.configValue" placeholder="请输入最长充电时长" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="longRechargeTimeVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 免费充电分钟 -->
    <el-dialog title="修改配置" :visible.sync="freeRechargeTimeVisible" width="500px">
      <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="120px">
        <el-form-item label="免费充电分钟" prop="configValue">
          <el-input v-model="editForm.configValue" placeholder="请输入免费充电分钟" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="freeRechargeTimeVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 设备离线延迟结束订单时间 -->
    <el-dialog title="修改配置" :visible.sync="offlineDelayTimeVisible" width="500px">
      <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="200px">
        <el-form-item label="设备离线延迟结束订单时间" prop="configValue">
          <el-input v-model="editForm.configValue" placeholder="请输入设备离线延迟结束订单时间" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="offlineDelayTimeVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 投诉反馈电话 -->
    <el-dialog title="修改配置" :visible.sync="feedbackCallPhoneVisible" width="500px">
      <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="120px">
        <el-form-item label="投诉反馈电话" prop="configValue">
          <el-input v-model="editForm.configValue" placeholder="请输入投诉反馈电话" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="feedbackCallPhoneVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 设备类型配置 -->
    <el-dialog title="修改配置" :visible.sync="deviceTypeConfigVisible" width="700px">
      <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="120px">
        <el-form-item label="设备类型配置" required>
          <el-form-item label="" v-for="(item, index) in editDeviceTypeList" :key="index" style="margin-bottom: 10px">
            <el-row type="flex">
              <el-col :span="3" style="margin-right: 15px">设备类型</el-col>
              <el-col :span="8">
                <el-input v-model="item.deviceType" placeholder="请输入信号名称"></el-input>
              </el-col>
              <el-col :span="3" style="text-align: center; margin: 0 5px">端口数</el-col>
              <el-col :span="8">
                <el-input v-model="item.portNumber" placeholder="请输入端口数"></el-input>
              </el-col>
              <el-col :span="2">
                <el-button style="margin-left: 10px" size="mini" type="danger" icon="el-icon-delete" circle
                  @click="removeDeviceType(index)"></el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <!-- 添加设备类型 -->
          <el-button type="primary" size="small" style="width: 500px; margin-left: 0px; margin-top: 20px"
            icon="el-icon-plus" @click="addDeviceType">添加设备类型</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="deviceTypeConfigVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 全局折扣配置 -->
    <el-dialog title="修改配置" :visible.sync="discountConfigVisible" width="600px">
      <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="120px">
        <el-form-item label="折扣类型" required>
          <el-select style="width: 100%" v-model="editForm.type" placeholder="请选择">
            <el-option v-for="item in discountTypeList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="editForm.type === 'discount'" label="折扣比例" prop="discount">
          <el-input v-model="editForm.discount" placeholder="请输入折扣比例" />
        </el-form-item>

        <el-form-item v-else-if="editForm.type === 'full_reduction'" label="满减配置">
          <el-form-item label="" v-for="(item, index) in editFullReductionList" :key="index"
            style="margin-bottom: 10px">
            <el-row type="flex">
              <el-col :span="3" style="margin-right: 15px">满额(分)</el-col>
              <el-col :span="8">
                <el-input v-model="item.threshold" placeholder="满额"></el-input>
              </el-col>
              <el-col :span="3" style="text-align: center; margin: 0 5px">减额(分)</el-col>
              <el-col :span="8">
                <el-input v-model="item.sub" placeholder="减额"></el-input>
              </el-col>
              <el-col :span="2">
                <el-button v-if="editFullReductionList.length > 1" style="margin-left: 10px" size="mini" type="danger"
                  icon="el-icon-delete" circle @click="removeFullReduction(index)"></el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <!-- 添加满减配置 -->
          <el-button type="primary" size="small" style="width: 440px; margin-left: 0px; margin-top: 20px"
            icon="el-icon-plus" @click="addFullReduction">添加满减配置</el-button>
        </el-form-item>

        <el-form-item label="指定用户" prop="phoneList">
          <el-input type="textarea" v-model="editForm.phoneList" placeholder="请输入指定用户" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="discountConfigVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getConfigAPI, setConfigAPI } from "@/api/charge/config";

export default {
  name: "Config",
  data() {
    return {
      configKey: "long_recharge_time",
      content: "",
      visible: false,
      editForm: {},
      editRules: {
        configValue: [
          { required: true, message: "请输入内容", trigger: "blur" },
        ],
        discount: [{ required: true, message: "请输入内容", trigger: "blur" }],
      },

      longRechargeTimeVisible: false,
      freeRechargeTimeVisible: false,
      offlineDelayTimeVisible: false,
      feedbackCallPhoneVisible: false,
      deviceTypeConfigVisible: false,
      discountConfigVisible: false,

      deviceTypeList: [],
      editDeviceTypeList: [],

      // 折扣相关
      discountTypeList: [
        {
          label: "折扣",
          value: "discount",
        },
        {
          label: "满减",
          value: "full_reduction",
        },
      ],
      discountType: "",
      discountContent: "",
      fullReductionList: [],
      editFullReductionList: [],
      phoneList: "",
    };
  },
  watch: {
    configKey(value) {
      this.getConfig(value);
    },
  },
  created() {
    this.getConfig();
  },
  methods: {
    getConfig(configKey) {
      getConfigAPI({ configKey: configKey || this.configKey }).then((res) => {
        this.content = res.data;
        if (configKey === "device_type_config") {
          this.deviceTypeList = this.content ? JSON.parse(this.content) : [];
        } else if (configKey === "global_discount_count") {
          let discountObject = this.content ? JSON.parse(this.content) : {};
          this.discountType = discountObject.type;
          this.discountContent = discountObject.discount || "";
          this.fullReductionList = discountObject.full_reduction || [];
          this.phoneList = discountObject.phoneList || "";
        }
      });
    },
    edit() {
      switch (this.configKey) {
        case "long_recharge_time":
          this.editForm = {
            configId: "100",
            configName: "最长充电时长",
            configKey: "long_recharge_time",
            configValue: this.content || "",
            configType: "Y",
          };
          this.longRechargeTimeVisible = true;
          break;
        case "free_recharge_time":
          this.editForm = {
            configId: "105",
            configName: "免费充电分钟",
            configKey: "free_recharge_time",
            configValue: this.content || "",
            configType: "Y",
          };
          this.freeRechargeTimeVisible = true;
          break;
        case "offline_delay_time":
          this.editForm = {
            configId: "101",
            configName: "设备离线延迟结束订单时间",
            configKey: "offline_delay_time",
            configValue: this.content || "",
            configType: "Y",
          };
          this.offlineDelayTimeVisible = true;
          break;
        case "feedback_call_phone":
          this.editForm = {
            configId: "102",
            configName: "投诉反馈电话",
            configKey: "feedback_call_phone",
            configValue: this.content || "",
            configType: "Y",
          };
          this.feedbackCallPhoneVisible = true;
          break;
        case "device_type_config":
          this.editForm = {
            configId: "103",
            configName: "设备类型配置",
            configKey: "device_type_config",
            configValue: this.content || "",
            configType: "Y",
          };
          this.editDeviceTypeList = JSON.parse(
            JSON.stringify(this.deviceTypeList)
          );
          this.deviceTypeConfigVisible = true;
          break;
        case "global_discount_count":
          this.editForm = {
            configId: "104",
            configName: "全局折扣配置",
            configKey: "global_discount_count",
            configValue: this.content || "",
            configType: "Y",
            type: this.discountType,
            discount: this.discountContent,
            phoneList: this.phoneList,
          };
          this.editFullReductionList = JSON.parse(
            JSON.stringify(this.fullReductionList)
          );
          if (!this.editFullReductionList.length) {
            this.editFullReductionList = [
              {
                threshold: "",
                sub: "",
              },
            ];
          }
          this.discountConfigVisible = true;
          break;
      }
    },
    submit() {
      this.$refs["editForm"].validate((valid) => {
        if (valid) {
          let params = {
            configId: this.editForm.configId,
            configName: this.editForm.configName,
            configKey: this.editForm.configKey,
            configValue: this.editForm.configValue,
            configType: "Y",
          };
          // 校验设备类型
          if (this.configKey === "device_type_config") {
            let flag = true;
            this.editDeviceTypeList.forEach((item) => {
              if (!item.deviceType || !item.portNumber) {
                flag = false;
              }
            });
            if (!flag) {
              this.$modal.msgError("请完整填写设备信息");
              return false;
            }
            params.configValue = JSON.stringify(this.editDeviceTypeList);
          }
          // 全局折扣配置
          if (this.configKey === "global_discount_count") {
            if (this.editForm.type === "discount") {
              if (!this.editForm.discount) {
                this.$modal.msgError("请输入折扣比例");
                return false;
              }
            } else if (this.editForm.type === "full_reduction") {
              let flag = true;
              this.editFullReductionList.forEach((item) => {
                if (!item.threshold || !item.sub) {
                  flag = false;
                }
              });
              if (!flag) {
                this.$modal.msgError("请完整填写满减信息");
                return false;
              }
            }

            let discountParams = {
              type: this.editForm.type,
              phoneList: this.editForm.phoneList,
            };
            if (discountParams.type === "discount") {
              discountParams.discount = this.editForm.discount;
            } else if (discountParams.type === "full_reduction") {
              discountParams.full_reduction = this.editFullReductionList;
            }

            console.log('discountParams', discountParams);
            params.configValue = JSON.stringify(discountParams);
          }
          setConfigAPI(params).then((res) => {
            this.$modal.msgSuccess("修改配置成功");
            this.longRechargeTimeVisible = false;
            this.offlineDelayTimeVisible = false;
            this.feedbackCallPhoneVisible = false;
            this.deviceTypeConfigVisible = false;
            this.discountConfigVisible = false;
            this.getConfig(this.configKey);
          });
        }
      });
    },
    // 删除设备类型
    removeDeviceType(index) {
      this.editDeviceTypeList.splice(index, 1);
    },
    // 添加设备类型
    addDeviceType() {
      this.editDeviceTypeList.push({});
    },
    removeFullReduction(index) {
      this.editFullReductionList.splice(index, 1);
    },
    addFullReduction() {
      this.editFullReductionList.push({});
    },
  },
};
</script>
<style scoped lang="scss">
.config-container {
  width: 600px;
  display: flex;
  margin-bottom: 20px;
}

.config-label {
  flex: none;
  color: #606266;
  font-size: 14px;
  font-weight: bold;
  margin-right: 10px;
}

.config-content {
  flex: auto;
  padding: 2px;
}

.edit-footer {
  width: 600px;
  display: flex;
}

.device-wrapper {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 20px;

  .device-item {
    display: flex;
    width: 100%;
    margin-bottom: 5px;

    div {
      margin-right: 15px;
    }
  }
}

.discount-wrapper {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 20px;

  .discount-item {
    display: flex;
    width: 100%;
    margin-bottom: 5px;

    div {
      margin-right: 15px;
    }
  }
}
</style>
